import { Col, Row } from 'antd'
import { classnames } from 'utils'

import styles from './Serve.less'

const YQserve = () => {

	return (
		<div className={styles.serveWrap}>
			<div className={styles.title}>
        <div>服务功能</div>
      </div>
      <Row><Col span={12}>
        <Row className={styles.cards}>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>API网关</div>
              <div className={classnames(styles.cardContent)}>
                认证、授权、安全、异常、熔断
              </div>
            </div>
          </Col>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>API监控</div>
              <div className={classnames(styles.cardContent)}>
                准确及时告警、丰富可视化统计报表
              </div>
            </div>
          </Col>
          <Col span={8} className={styles.card}>
            <div className={styles.cardBox}>
              <div className={styles.cardTitle}>API映射</div>
              <div className={classnames(styles.cardContent)}>
                SP\SQL\接口标准接口转换映射服务
              </div>
            </div>
          </Col>
        </Row>
      </Col></Row>
		</div>
	)
}

export default YQserve